/// <reference path="index.d.ts" />

import React from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import ReactDOM from 'react-dom';


export const show = (props: Menu.Prop) => {
    let atView;
    if (props.id) atView = document.getElementById(props.id);
    if (!atView) atView = document.getElementById('app')
    let MenuContainer = document.getElementById('MenuContainer')

    if (MenuContainer) atView.removeChild(MenuContainer)

    // console.log('show atView', atView)
    // console.log('show MenuContainer', MenuContainer)


    let div = document.createElement('div')
    div.setAttribute('style', 'position:fixed;top:0px;bottom:0px;right:0px;left:0px;background-color:transparent;  z-index: 99;')
    div.setAttribute('id', 'MenuContainer')
    div.onclick = () => hide(props.id)
    ReactDOM.render(<App {...props} />, div);
    atView.appendChild(div)
}



export const hide = (id?: string) => {
    let atView;
    if (id) atView = document.getElementById(id);
    if (!atView) atView = document.getElementById('app')
    let MenuContainer = document.getElementById('MenuContainer')

    if (MenuContainer) atView.removeChild(MenuContainer)

    // let MenuContainer2 = document.getElementById('MenuContainer')
    // console.log('hide atView', atView)
    // console.log('hide MenuContainer', MenuContainer2)
}


const App = (props: Menu.Prop) => {

    return (
        <View style={{ ...styles.container, ...props.style }}>
            <View style={styles.arrow} />
            <ScrollView scrollY style={styles.sc}>
                {props.ds.map((i, idx) => <ItemView key={`sg-sc-${idx}`} item={i} index={idx} onClick={() => {
                    props.onIndexClick && props.onIndexClick(idx)
                    hide(props.id)
                }} />)}
            </ScrollView>
        </View>
    )
}





const ItemView = (props: Menu.ItemProp) => {
    return (
        <View style={styles.item} onClick={e => {
            e.stopPropagation()
            props.onClick()
        }}>
            <Text style={{ fontSize: '13px', color: 'white' }} className='oneLine'>{props.item}</Text>
        </View>
    )
}



const rowHeight = '35px'
const bgHeight = `calc(${rowHeight} * 5 + 4px)`
const bgColor = '#646464'

const styles: Record<string, React.CSSProperties> = {
    container: {
        position: 'absolute',
        top: '10px',
        right: '10px',
        display: 'flex',
        minWidth: '33%',
        maxWidth: 'calc(100vw * 0.5)',
        minHeight: rowHeight,
        maxHeight: bgHeight,
        // overflow: 'hidden',
        backgroundColor: bgColor,
        borderRadius: '3px',
    },
    arrow: {
        position: 'absolute',
        top: '-6px',
        right: '20px',
        width: '12px',
        height: '12px',
        backgroundColor: bgColor,
        transform: 'rotate(45deg)',
        zIndex: -1
    },
    sc: {
        // flex:1,
    },
    item: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: rowHeight,
        margin: '0 10px',
        borderBottom: 'solid #7C7C7C 1px'
    }
}